<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 600px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 600px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>后台问题管理系统</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                         :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">试题管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="toPaper">试题类型列表</el-menu-item>
                            <el-menu-item index="1-2" @click="toQuestion">题目列表</el-menu-item>
                            <el-menu-item index="1-3" @click="toAnswer">答案列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span slot="title">人格管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="toCharacter">人格列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe v-bind:src="url" height="100%" width="100%" frameborder="medium none"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data:{
          url:"index.html"
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            toPaper(){
                this.url="paper-list.html"
            },
            toQuestion(){
                this.url="question-list.html"
            },
            toAnswer(){
                this.url="answer-list.html"
            },
            toCharacter(){
                this.url="character-list.html"
            },
        }
    })
</script>
</body>
</html>